<template>
    <!-- 外层 div，用于设置不透明背景 -->
    <transition name="fade">
        <div v-if="showAnimation" class="fullscreen-background">
            <div class="lottie-container" :style="containerStyle">
                <div ref="bodyAnimation" class="lottie-animation"></div>
            </div>
        </div>
    </transition>
</template>

<script setup>
import lottie from "lottie-web";
import sheepJson from "/public/assets/json/GG.json"; // 导入动画数据
import { useWindowSize } from "@vant/use"; // 导入 Vant 的 useWindowSize

const { proxy } = getCurrentInstance();

// 控制动画显示状态
const showAnimation = ref(true);

// 使用 Vant 的 useWindowSize 获取窗口大小
const { width: windowWidth, height: windowHeight } = useWindowSize();

// 定义 props，接收父组件传递的跳转路径
const props = defineProps({
    jump: {
        type: String,
        required: true, // 必须传递跳转路径
    },
});

// 计算动画容器的样式
const containerStyle = computed(() => ({
    width: `${windowWidth.value}px`,
    height: `${windowHeight.value}px`,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
}));

// 获取动画容器的引用
const bodyAnimation = ref(null);

// 存储动画实例
let anim = null;
let T = null;

// 在组件挂载时初始化动画
onMounted(() => {
    anim = lottie.loadAnimation({
        container: bodyAnimation.value, // 动画容器
        renderer: "svg", // 渲染方式
        loop: false, // 不循环播放
        autoplay: true, // 自动播放
        animationData: sheepJson, // 动画数据
    });

    // 动画播放结束后执行的操作
    anim.addEventListener("complete", () => {
        console.log("🚀 ~ 动画播放完毕！");
        // 使用 router.push 跳转到指定路径
        proxy.$router.push({
            path: props.jump,
            replace: true, // 替换当前路由
        });
        // 动画播放完毕后，延迟500ms触发过渡效果并通知父组件
        T = setTimeout(() => {
            showAnimation.value = false;
        }, 800);
    });
});

// 在组件卸载时清除定时器
onUnmounted(() => {
    console.log("🚀 ~ Lottie组件被卸载");
    if (anim) {
        anim.destroy(); // 销毁动画实例
    }
    clearTimeout(T); // 清除定时器
});
</script>

<style scoped>
/* 外层 div，设置不透明背景 */
.fullscreen-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    /* 设置为白色背景 */
    z-index: 9999;
    /* 确保在最上层 */
}

.lottie-container {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
}

.lottie-animation {
    width: 100%;
    /* 动画宽度 */
    height: 100%;
    /* 动画高度 */
}

/* 过渡效果 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>
